<template>
  <div class="skeleton">
    <skeleton :bg="bg" width="306px" height="306px"/>
    <div class="bottom">
      <skeleton :bg="bg" width="100px" height="22px"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import Skeleton from '@/components/library/Skeleton.vue'
withDefaults(defineProps<{
  bg?: string
}>(), {
  bg: '#cdcdcd'
})
</script>

<style scoped lang="less">
.skeleton {
  width: 306px;
  height: 406px;

  .bottom {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>